<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button class="set">创建(存储)</button>
</body>
<script>

  var setBtn = document.querySelector(".set");

  // cookie的创建
  // 1. cookie 的存取都依赖于 document.cookie 
  // 2. cookie也是以键值对形式存在的(key=value  键名键值都是字符串)
  // 3. cookie是一条一条存储的

  // cookie的时效性  => cookie可以设置过期时间
  // 默认情况下 cookie在会话结束(浏览器关闭)时过期,如果想设置过期时间,需要借助expires属性
  // expires可以接收一个字符串类型的时间(世界时) 当做过期时间  

  // date.toUTCString()   本地时间转世界时

  // cookie的跨页面访问 => cookie可以设置存储路径
  // cookie默认存储在当前文件所在的目录, 同目录及其子目录下的文件 均可以访问cookie
  // 如果想要设置存储路径 ,需要借助path属性
  // path可以接收一个路径(建议从根目录开始)

  setBtn.onclick = function () {
    var user = "a123123";
    var pwd = "123123";
    var phone = "17386141517";
    var email = "1272071495@qq.com";

    // setCookie("user",user);
    // setCookie("pwd",pwd);
    // setCookie("phone",phone);
    // setCookie("email",email);
    setCookie("user", user, 7);
    setCookie("pwd", pwd, 7);
    setCookie("phone", phone, 7);
    setCookie("email", email, 7);
  }

  // key  键名
  // val  键值
  // day  过期时间
  // path  存储路径
  function setCookie(key, val, day, path = "/") {
    // var val = "a123123";

    if (day) {   // 有过期时间
      var date = new Date();
      date.setDate(date.getDate() + day);
      document.cookie = key + "=" + val + ";expires=" + date.toUTCString() + ";path=" + path;
    } else {
      document.cookie = key + "=" + val + ";path=" + path;
    }
  }



</script>

</html>